<template>
    <div class="wrap">
        <div class="header">
            <div>
                <div class="header-title">专业技术人员业绩数据信息系统</div>
                <p></p>
                <div class="password-bar">找回密码</div>
            </div>
        </div>
        <div class="content" v-show="false">
            <h3>通过手机号找回密码</h3>
            <p>（提示：请输入与您的身份证号码，我们将把获取<span>密码以短信形式发到你手机上</span>）</p>
            <div class="form-password">
                <div class="form-item">
                    <label>电话号码：</label>
                    <el-input v-model="phoneVal" maxlength="11" minlength="11" size="medium"></el-input>
                </div>
                <div class="form-item">
                    <label>验证码：</label>
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-input v-model="imageCode" size="medium"></el-input>
                        </el-col>
                        <el-col :span="8" >
                            <img class="verifyCodeImage" :src="imageCodeUrl" @click="imageCodeUrl = imageCodeUrl + '?' + Math.random()">
                        </el-col>
                    </el-row>
                </div>
                <div class="form-item">
                    <label>验证码：</label>
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-input v-model="code" size="medium"></el-input>
                        </el-col>
                        <el-col :span="8" :class="timer!=null ? 'active' : ''">
                            <el-button @click="handleCode" type="primary" size="medium">{{codeText}}</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="form-btn">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-button class="submit-btn" type="primary" @click="handleResetPassword" size="medium">找回密码</el-button>
                        </el-col>
                        <el-link class="aside-text" type="primary" @click="toLogin">记住密码我要登录</el-link>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="main">
            <h1>温馨提示</h1>
            <p>（提示：修改密码请联系相关工作人员）</p>
            <img src="../../assets/login/Passwords-bg.png">
        </div>
        <!--<div class="footer">-->
            <!--EEL职称评审人员管理信息系统-->
        <!--</div>-->
    </div>
</template>

<script>
    import { sendSmsCodePost,findResetPassword } from '@/service/api'
    export default {
        name: "Passwords",
        data() {
            return {
                phoneVal: '',
                code:'',
                imageCode:'',
                codeText: '获取验证码',
                timer: null,
                countdown: 60,
                imageCodeUrl:'http://gf.chabaobao.net/open/kaptcha/'
            }

        },
        methods:{
            handleCode(){
                if(this.timer != null){
                    return false
                }
                let formData =  new FormData;
                formData.append("mobile",this.phoneVal);
                formData.append("imageCode",this.imageCode);
                formData.append("type",'1');
                sendSmsCodePost(formData).then(res => {
                    if(res.code == 200){
                        this.timedCount();
                    }else{
                        this.countdown = 0;
                    }
                });
            },
            timedCount() {
                this.timer = setInterval(()=>{
                    this.codeText = '重新获取('+this.countdown+')s';
                    this.countdown --;
                    if(this.countdown == 0){
                        clearTimeout(this.timer);
                        this.timer = null;
                        this.codeText = '获取验证码';
                        this.countdown = 60;
                    }
                },1000)
            },
            handleResetPassword() {
                let formData =  new FormData;
                formData.append("mobile",this.phoneVal);
                formData.append("code",this.code);
                findResetPassword(formData).then(res => {
                    if(res.code == 200){
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                    }else{
                        this.countdown = 0;
                    }
                });
            },
            toLogin() {
                this.$router.replace({name:"login"});
            }
        }
    }
</script>

<style scoped>
    .header{
        width: 100%;
        height: 108px;
        background: url("../../assets/login/Passwords-title-bg.png") no-repeat;
        background-size: 100% 100%;
    }
    .header > div{
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    .header-title{
        font-size: 18px;
        width: 270px;
        color: #fff;
        line-height: 28px;
        font-weight:bold;
    }
    .header > div> p{
        width: 2px;
        height: 34px;
        background: #fff;
        margin: 0 40px 0 30px;
    }
    .password-bar{
        font-size: 18px;
        color: #fff;
        cursor: pointer;
        font-weight:bold;
    }

    .content > h3{
        color: #333;
        font-size:28px;
        font-weight:bold;
        color:rgba(51,51,51,1);
        text-align: center;
        margin: 50px 0 28px 0;
    }
    .content > p{
        text-align: center;
        font-size: 12px;
        font-weight:bold;
        color: #656265;
    }
    .content > p span{
        color: #E35D4D;
        font-size: 12px;
        font-weight:bold;
    }
    .form-password{
        width: 300px;
        margin: 50px auto 0;
    }
    .form-item{
        margin-bottom: 22px;
    }
    .form-item > label{
        display: block;
        font-size:15px;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin-bottom: 4px;
    }
    .form-btn{
        margin-top: 38px;
    }
    .submit-btn{
        width: 100%;
    }
    .aside-text{
        margin-top: 8px;
        font-size: 13px;
    }
    .footer{
        position: absolute;
        bottom: 52px;
        width: 100%;
        height: 30px;
        background: #EEEBEE;
        text-align: center;
        font-size:12px;
        font-weight:bold;
        line-height: 30px;
        color:rgba(180,181,180,1);

    }
    .active >>> .el-button{
        background: RGBA(48, 131, 249, 0.5);
        border-color: RGBA(48, 131, 249, 0.5);
    }
    .verifyCodeImage{
        width: 110%;
        height: 35px;
        cursor: pointer;
    }
    .main{
        text-align: center;
        margin: 0 auto;
        overflow: hidden;
        color: #333;
    }
    .main h1{
        margin: 107px 0 46px;
        font-size: 32px;
        font-weight:bold;
    }
    .main p{
        font-size: 16px;
        font-weight:bold;
    }
    .main img{
        display: block;
        width: 1090px;
        margin: 30px auto 0;
    }
</style>
